<template>
	<view>
		<view class="nav2">
			<u-navbar title="服务成果" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="c343 f28 mb10">出发时间：{{detail.estimateTime}}</view>
			<view class="c343 f28 mb20">完成时间：{{detail.finishTime}}</view>
			<view class="bgFff radius30 p30">
				<view>
					<view class="flex flex-start">
						<u-image :src="api_host + detail.orderPro.icon" mode="" width="76px" height="76px"
							radius="5"></u-image>
						<view class="p10 ml10 flex1">
							<view class="c343 f32 bold">{{detail.orderPro.proName}}</view>
							<u-gap height="10"></u-gap>
							<view>
								<view class="flex-jus f28 c999 mb10" v-for="(item,index) in detail.orderDetails"
									:key="index">
									<text>{{item.name}} x{{item.buyCount}}</text>
									<text>¥ {{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="mb20" v-if="detail.orderAppend">
					<view class="bgF7 p30 radiusBox mt20 mb20">
						<view class="c343 f26 mb20 bold">追加服务</view>
						<view class="f24 c343">
							{{detail.orderAppend.describe}}
						</view>
						<!-- <view class="flex" v-if="detail.sceneImages">
							<view class="m10" v-for="(img,imgIndex) in detail.sceneImages.split(',')">
								<u-image :src="api_host + img" mode="" width="76px" height="76px"
									radius="5"></u-image>
							</view>
						</view> -->
					</view>
					<view class="flex-jus">
						<text class="c343 f24">追加服务总价</text>
						<text class="c343 f24">¥ {{detail.orderAppend.price}}</text>
					</view>
					<u-gap height="20"></u-gap>
					<!-- <view class="flex-jus">
						<text class="c343 f28 bold">优惠</text>
						<view class="cyellow ml10">
							<text class="f24">￥</text>
							<text class="f28 bold">{{detail.discountPrice || '0.00'}}</text>
						</view>
					</view> -->
					<view class="flex-jus">
						<text
							class="c343 f28 bold">{{detail.orderStatus > 3 && detail.orderStatus != 11?'实付款':'应付款'}}</text>
						<view class="cyellow ml10">
							<text class="f24">￥</text>
							<text class="f32 bold">{{detail.orderAppend.price}}</text>
							<!-- <text class="f28 bold">{{detail.orderPrice + (detail.orderAppend?Number(detail.orderAppend.price):0)}}</text> -->
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="f32 c343 bold" v-if="detail.sceneImages">服务成果</view>
				<view class="mt20" v-if="detail.sceneImages">
					<view class="flex flex-wrap">
						<view v-for="(item,index) in detail.sceneImages.split(',')" :key="index" class="ml10 mr10 mb10"
							@click="viewImg(index)">
							<image :src="api_host + item" mode=""
								style="width: 25vw;height: 200rpx;border-radius: 10rpx;"></image>
						</view>
					</view>
				</view>
				<u-gap height="30"></u-gap>
				<view v-if="detail.orderStatus == 3">
					<view class="flex-au">
						<u-button shape="circle" color="#FFDE6D" @click="payOrderappend()" v-if="detail.orderAppend"
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'32rpx','width':'50%','fontWeight':'bold'}">
							确认并支付
						</u-button>
						<u-button shape="circle" color="#FFDE6D" @click="advanceStatusbtn()" v-else
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx','fontSize':'32rpx','width':'50%','fontWeight':'bold'}">
							确认成果
						</u-button>
					</view>
				</view>
			</view>
			<u-gap height="50"></u-gap>
			<view class="textC" @click="maketel(config.phone)">
				<image src="../static/housekeeping/kf.png" mode="widthFix" style="width:30%;"></image>
			</view>
			<u-gap height="30"></u-gap>
		</view>
		<u-modal :show="show_action" title="确认完成!" :content="detail.orderType == 1?'感谢您的支持，请对本次服务作出评价':'感谢您的支持'">
			<view class="" slot="confirmButton">
				<view class="flex-jus" v-if="detail.orderType == 1">
					<view class="flex1">
						<view class="mr20">
							<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="show_action = false">取消</u-button>
						</view>
					</view>
					<view class="flex1">
						<view class="ml20">
							<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="toEvaluate">去评价</u-button>
						</view>
					</view>
				</view>
				<view class="" v-if="detail.orderType == 2">
					<view class="flex-au">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'50%'}"
							shape="circle" @click="show_action = false">确定</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getOrderdetail,
		payOrderappend,
		advanceStatus
	} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				show_action: false,
				detail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderdetail()
		},
		methods: {
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						dictDatas
					} = this.detail
					this.tagList = dictDatas.map(item => {
						return {
							...item,
							checked: false
						}
					})
				}
				uni.hideLoading()
			},
			viewImg(index) {
				let data = this.detail.sceneImages.split(',')
				let arr = []
				data.forEach(item => {
					arr.push(this.api_host + item)
				})
				uni.previewImage({
					urls: arr,
					current: index
				})
			},
			toEvaluate() {
				this.show_action = false
				this.openUrl('/subpage/order/evaluate?id=' + this.id)
			},
			async payOrderappend() {
				const that = this
				uni.showLoading({
					mask: true
				})
				const res = await payOrderappend({
					code: this.detail.orderAppend.appendCode
				})
				if (res.code == 200) {
					let config = res.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: config.timeStamp.toString(),
						nonceStr: config.nonceStr,
						package: 'prepay_id=' + config.package.prepay_id,
						signType: config.signType,
						paySign: config.paySign,
						success() {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							setTimeout(() => {
								that.show_action = true
								that.getOrderdetail()
							}, 800)
						},
						fail() {
							uni.hideLoading()
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
						}
					})
				}
				uni.hideLoading()
			},
			async advanceStatusbtn(item) {
				const that = this
				uni.showModal({
					title: '确定完成订单吗？',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.advanceStatus()
						}
					}
				})
			},
			async advanceStatus() {
				uni.showLoading({
					mask: true
				})
				const res = await advanceStatus({
					id: this.id
				})
				if (res.code == 200) {
					this.getOrderdetail()
					this.show_action = true
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
</style>